<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/index.css" />
    <link rel="stylesheet" type="text/css" href="../../script/lib/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="css.css" />
    <style>
    	.warp{width: 100%;}
	    .kind_box{position: fixed;width: 100%;left: 0;top:0;bottom: 0;right: 0;background: #FFFFFF;}
	    .kind_box .left{width: 90px;background:#F7F7F7;height: 100%;overflow-y: auto;flex-shrink: 0;}
	    .kind_box .left::-webkit-scrollbar{display: none;}
	    .kind_box .left span{display: block;height: 50px;width: 100%;background:#F7F7F7;text-align:center;line-height: 50px;color: #666666;position: relative;}
	    .kind_box .left .active{background:#FFFFFF;color: #F9891A;}
        .kind_box .left .active::before{display: block;content: "";width: 2px;height: 14px;background: #F9891A;position: absolute;left: 0;top: 50%;margin-top: -7px;}

	    .kind_box .right{padding:15px;box-sizing: border-box;width: 100%;height: 100%;overflow-y: auto;}
	    .kind_box .right::-webkit-scrollbar{display: none;}
	    .kind_box .right .ad{width: 100%;height:140px;margin-bottom: 10px;}
	    .kind_box .right .ad img{width: 100%;display: block;}
        .kind_box .right .class-list{width: 100%;}
        .kind_box .right .class-list .class-box{width: 100%;}
        .kind_box .right .class-list .class-box .class-one{height: 50px;line-height: 50px;align-items: center;}
        .kind_box .right .class-list .class-box .class-one .t{height: 50px;line-height: 50px;padding-right: 20px;box-sizing: border-box;}
        .kind_box .right .class-list .class-box .class-one .icon{width: 14px;height: 14px;background:url(../../image/main1/down.png) no-repeat center;
        background-size: 14px;-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-webkit-transition:0.3s;transition:0.3s;transform-origin：center;}

	    .kind_box .right .class-list .class-box .nav-box{width: 100%;flex-wrap: wrap;display:none;}
	    .kind_box .right .class-list .class-box .nav-box .nav-one{width: 30%;margin-right: 5%;margin-bottom: 15px;}
	    .kind_box .right .class-list .class-box .nav-box .nav-one:nth-child(3n){margin-right: 0;}
	    .kind_box .right .class-list .class-box .nav-box .nav-one .img-box{width: 100%;padding-bottom: 100%;position:relative;overflow: hidden;}
	    .kind_box .right .class-list .class-box .nav-box .nav-one .img-box img{display: block;position: absolute;top: 0;left: 0;width: 100%;}
	    .kind_box .right .class-list .class-box .nav-box .nav-one .text{text-align: center;font-size: 12px;padding-top: 8px;box-sizing: border-box;}
        .kind_box .right .class-list .class-box.on .nav-box{display:flex;}
        .kind_box .right .class-list .class-box.on .class-one .icon{-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);
        -webkit-transition:0.3s;transition:0.3s;transform-origin：center;}

		.kind_box .pingpai-list{width: 100%;height: 100%;overflow-y: auto;}
	    .kind_box .pingpai-list::-webkit-scrollbar{display: none;}
		.kind_box .pingpai-list .pingpai-box{width: 100%;flex-wrap: wrap;padding: 15px 8px;box-sizing: border-box;}
		.kind_box .pingpai-list .pingpai-box .pingpai-one{width: 33.3%;font-size: 13px;color: #999999;padding: 0 8px;box-sizing: border-box;margin-bottom: 15px;}
		.kind_box .pingpai-list .pingpai-box .pingpai-one .img-box{width: 100%;padding-top: 100%;height: 0;align-items: center;justify-content: center;overflow: hidden;}
		.kind_box .pingpai-list .pingpai-box .pingpai-one .img-box img{width: 100%;display:block;text-align: 0;}
		.kind_box .pingpai-list .pingpai-box .pingpai-one .text{color: #333333;box-sizing: border-box;font-size: 12px;padding-top:10px;text-align: center;}
		.kind_box .pingpai-list .pingpai-box .pingpai-one .bot-box .info-one:last-child:before{display: none;}

    </style>
</head>

<body>
    <div id="vue" class="warp">

        <!-- 分类选择 -->
        <div class="kind_box flex">

            <!-- 分类左侧部分 -->
            <div class="left">
                <span class="active" tapmode onclick="tab_type(this);">热卖品牌</span>
                <span class="" tapmode onclick="tab_type(this);" v-for="(item,key) in Pdata.class" v-text="item.name" :data-id="item.id"></span>
            </div>

             <!-- 分类右侧部分 -->
            <div class="pingpai-list" style="display: block;">
                <div class="pingpai-box flex" v-if="Pdata.pinpai">
                	<div class="pingpai-one" v-for="(item,key) in Pdata.pinpai" data-type="pinpai" :data-title="item.title" :data-id="item.id" tapmode onclick="open_fenlei(this)">
                        <div class="img-box bgpic" :style="{backgroundImage:'url('+item.logo+')'}" tapmode onclick="" ></div>
                        <div class="text han_1" v-text="item.title"></div>
                	</div>
                </div>
                <div class="nodata" v-if="!Pdata.pinpai">
                    <img src="../../image/no_page/no_pinpai.png" />
                    <p>暂无品牌</p>
                </div>
            </div>

            <!-- 分类右侧部分 -->
            <div class="right flex1" style="display:none;">
                <div class="ad bgpic" v-if="ad" :style="{backgroundImage:'url('+ad.image+')'}" :data-id="ad.toid" :data-type="ad.type" :data-title="ad.title" tapmode onclick="open_fenlei(this)"></div>
                <div class="class-list">
                    <div class="class-box border-top" :data-title="item.name" :data-id="item.id" v-for="(item,key) in odata" >
                        <div class="class-one flex" tapmode onclick="downClass(this)">
                            <div class="t flex1" v-text="item.name"></div>
                            <div class="icon"></div>
                        </div>
                        <div class="nav-box flex">
                            <div class="nav-one" :data-title="i.name" :data-id="i.id" v-for="(i,k) in item.list" tapmode onclick="goShopList(this)">
                                <div class="img-box flex"><img :src="i.image"/></div>
                                <div class="text" v-text="i.name"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--占位图-->
                <div class="nodata" v-if="!odata || odata.length <= 0">
                    <img src="../../image/no_page/no_fenlei.png" />
                    <p>暂无分类</p>
                </div>
            </div>

        </div>
    </div>

    <script type="text/javascript" src="../../script/base.min.js" id="loadjs" data-load="L/swiper.min,L/aui-scroll"></script>
    <script type="text/javascript">
    define(function (require, exports, module) {

        _page.getData = function(loading) {
            lanYun.getVueData({url:'ShopClass/index',get:{page:lanYun.page},cache:1,loading:loading},function(ret) {
                //console.log(JSON.stringify(ret));
                if(ret.data.pinpai){
                    lanYun.setStorage('pinpaiData',ret.data.pinpai);
                }
            });
        };

        lanYun.newVue('#vue',{
            ad:{},
            odata:[]
        }, function() {
            //_page.getData();
        });

        getData = function (){
            lanYun.ajaxPageSta = 0; lanYun.page = 1;
            _page.getData();
        }

		//切换左侧分类
		tab_type = function (tis) {
            if($(tis).hasClass('active')){
                return;
            }
	        var dst = tis.dataset;
	        var index = $(tis).index();
	        $('.left span').removeClass('active');
        	$(tis).addClass('active');
        	if( index == 0){
        		$('.pingpai-list').show();
        		$('.right').hide();
        	}else{
        		$('.pingpai-list').hide();
        		$('.right').show();
        	}
            if(index > 0){
                getClass(dst.id,2);
            }
	    }

        // 获取二级分类
        getClass = function (id,loading) {
            lanYun.get('ShopClass/getClass?id=' + id,function (ret){
                //console.log(JSON.stringify(ret));
                lanYun.vue.ad = ret.data.ad;
                lanYun.vue.odata = ret.data.listData;
            },loading)
        }

        //打开品牌
	    goPinPai = function (tis) {
	        var dst = tis.dataset;
	        lanYun.openWin('main0/list_pinpai.html', {
	            win:'win',
                title:'商品列表',
	            frameParam : dst
	        });
	    }

        //打开分类
	    goShopList = function (tis) {
	        var dst = tis.dataset;
	        lanYun.openWin('main0/list_shop.html', {
	            win:'none',
	            frameParam : {id:dst.id}
	        });
	    }

        //字母排序定位
        goTop = function (tis){
            var dst = tis.dataset;
            var index = $(tis).index();
            $(tis).addClass('on').siblings().removeClass('on');
            var all = [];
            $(".paixu span").each(function(){
                all.push($(this).data('id'));
            })
            all.splice(index);
            var top = 0;
            all.forEach(function (item, idnex) {
                top += $('#'+ item).height();
            })
            $('.pingpai-list').scrollTop(top);
        }

        //打开不同分类的链接
        open_fenlei = function (tis) {
            var dst = tis.dataset;
            switch(dst.type){
                case "class":
                    lanYun.openWin('main0/list_shop.html', {win:'none',frameParam : dst});
                    break;
                case "zhuanti":
                    lanYun.openWin('main0/list_zhuanti.html', {win:'win',title:dst.title,border:'1',frameParam : dst});
                    break;
                case "pinpai":
                    lanYun.openWin('main0/list_pinpai.html', {win:'win',title:dst.title,frameParam : dst});
                    break;
                case "shop":
                    lanYun.openWin('goods/show', {win:'none',frameParam : dst});
                    break;
                case "goods":
                    lanYun.openWin('goods/show', {win:'none',frameParam : dst});
                    break;
                case "none":
                    return;
                    break;
                default:
                    break;
            }
        }

        downClass = function (tis) {
            var par =$(tis).parent(".class-box");
            if($(par).hasClass('on')){
                $(par).removeClass('on');
            }else {
                $(par).addClass('on');
            }
        }

    });
    </script>
</body>
</html>
